<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>千园千变，万班万课</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/admin.css">
    <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<div class="tpl-portlet-components">
    <div class="portlet-title">
        <ol class="am-breadcrumb">
            <li><a href="#" class="am-icon-home">首页</a></li>
            <li><a href="#">表单</a></li>
            <li class="am-active">Amaze UI 表单</li>
        </ol>
    </div>
    <div class="tpl-block ">
        <div class="am-g tpl-amazeui-form">
            <div class="am-u-sm-12">
                <form class="am-form am-form-horizontal">
                    <div class="am-form-group">
                        <label class="am-u-sm-2 am-form-label">名称</label>
                        <div class="am-u-sm-10 line">
                            <input type="tel" id="title" name="title"
                                   class="verification[required]" data-info="名称"
                                   style="width: 300px" placeholder="请输入名称">
                            <span class="tips"> </span>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-2 am-form-label">水平</label>
                        <div class="am-u-sm-10 line">
                            <label class="am-radio-inline">
                                <input type="radio"  value="初级" checked name="level"> 初级
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" value="中级" name="level"> 中级
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" value="高级" name="level"> 高级
                            </label>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-2 am-form-label">难度</label>
                        <div class="am-u-sm-10 line">
                            <label class="am-radio-inline">
                                <input type="radio"  value="简单" checked name="difficulty">简单
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" value="中等"  name="difficulty"> 中等
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" value="困难" name="difficulty"> 困难
                            </label>
                        </div>
                    </div>
                    <div class="am-form-group ">
                        <label class="am-u-sm-2 am-form-label">人数</label>
                        <div  class="am-u-sm-10 line">
                            <input type="number" name="people_num" style="width: 150px" placeholder="输入人数">
                        </div>
                    </div>
                    <div class="am-form-group ">
                        <label class="am-u-sm-2 am-form-label">课程时长</label>
                        <div  class="am-u-sm-10 line">
                            <input type="text" name="duration" style="width: 150px" placeholder="课程时长">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-2 am-form-label">班级</label>
                        <div class="am-u-sm-10 line">
                            <label class="am-radio-inline">
                                <input type="radio"  value="小班" checked name="class"> 小班
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" value="中班" name="class"> 中班
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" value="大班" name="class"> 大班
                            </label>
                        </div>
                    </div>
                    <div class="am-form-group ">
                        <label  class="am-u-sm-2 am-form-label">上肢力量</label>
                        <div  class="am-u-sm-10 line">
                            <div class="star_content">
                                <label class="am-radio-inline">
                                    <input type="radio"  value="0" checked name="sz"> 0星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="1" name="sz"> 1星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="2" name="sz"> 2星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="3" name="sz"> 3星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="4" name="sz"> 4星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="5" name="sz"> 5星
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="am-form-group ">
                        <label  class="am-u-sm-2 am-form-label">下肢力量</label>
                        <div  class="am-u-sm-10 line">
                            <div class="star_content">
                                <label class="am-radio-inline">
                                    <input type="radio"  value="0" checked name="xz">0星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="1" name="xz"> 1星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="2" name="xz"> 2星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="3" name="xz"> 3星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="4" name="xz"> 4星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="5" name="xz"> 5星
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="am-form-group ">
                        <label  class="am-u-sm-2 am-form-label">柔韧性</label>
                        <div  class="am-u-sm-10 line">
                            <div class="star_content">
                                <label class="am-radio-inline">
                                    <input type="radio"  value="1" checked name="rr"> 0星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="1" name="rr">1星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="2" name="rr"> 2星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="3" name="rr"> 3星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="4" name="rr"> 4星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="5" name="rr"> 5星
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="am-form-group ">
                        <label  class="am-u-sm-2 am-form-label">平衡性</label>
                        <div  class="am-u-sm-10 line">
                            <div class="star_content">
                                <label class="am-radio-inline">
                                    <input type="radio"  value="0" checked name="ph"> 0星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="1" name="ph"> 1星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="2" name="ph"> 2星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="3" name="ph"> 3星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="4" name="ph"> 4星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="5" name="ph"> 5星
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="am-form-group ">
                        <label  class="am-u-sm-2 am-form-label">协调性</label>
                        <div  class="am-u-sm-10 line">
                            <div class="star_content">
                                <label class="am-radio-inline">
                                    <input type="radio"  value="0" checked name="xt"> 0星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="1" name="xt"> 1星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="2" name="xt"> 2星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="3" name="xt"> 3星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="4" name="xt"> 4星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="5" name="xt"> 5星
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="am-form-group ">
                        <label  class="am-u-sm-2 am-form-label">灵敏性</label>
                        <div  class="am-u-sm-10 line">
                            <div class="star_content">
                                <label class="am-radio-inline">
                                    <input type="radio"  value="0" checked name="lm"> 0星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="1" name="lm"> 1星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="2" name="lm"> 2星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="3" name="lm"> 3星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="4" name="lm"> 4星
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" value="5" name="lm"> 5星
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-2 am-form-label">课程视频</label>
                        <div class="am-u-sm-10 line">
                            <input type="tel" id="course_video" name="course_video" placeholder="请输入课程视频地址">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-2 am-form-label">律动视频</label>
                        <div class="am-u-sm-10 line">
                            <input type="tel" id="rhythm_video" name="rhythm_video"placeholder="请输入律动视频地址">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-2 am-form-label">课程封面图</label>
                        <div class="am-u-sm-10 line">
                            <div class="img_content">
                                <input type="file" class="img_upload"  id="cover_photo">
                                <i class="am-icon-file-image-o"></i>
                                <img src="" alt="">
                            </div>
                            <button class="am-btn am-btn-default  am-btn-xs preview_btn">
                                <i class="am-icon-eye"></i>
                                预览
                            </button>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-2 am-form-label">教案图片</label>
                        <div class="am-u-sm-10 line">
                            <div class="img_content">
                                <input type="file" class="img_upload"   id="teachingt_img">
                                <i class="am-icon-file-image-o"></i>
                                <img src="" alt="">
                            </div>
                            <button class="am-btn am-btn-default  am-btn-xs preview_btn">
                                <i class="am-icon-eye"></i>
                                预览
                            </button>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-2 am-form-label">教案附件</label>
                        <div class="am-u-sm-10 line">
                            <button type="button" class="am-btn am-btn-default am-btn-sm file_btn">
                                <i class="am-icon-cloud-upload"></i> 选择要上传的附件
                                <input type="file"  class="file_upload">
                            </button>
                            <small id="teachingt_enclosure"></small>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-2 am-form-label">简介</label>
                        <div class="am-u-sm-10">
                            <textarea class="" rows="5" id="content" name="content" placeholder="输入课程简介"></textarea>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <div class="am-u-sm-9 am-u-sm-push-2">
                            <button type="button" class="am-btn am-btn-primary" id="submitBtn" data-am-loading="{spinner: 'circle-o-notch', loadingText: '提交中...', resetText: '提交成功'}">确定</button>
                            <button type="button" class="am-btn am-btn-default btn_back">返回</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/layer.js"></script>
<script src="assets/js/jquery.cookie.js"></script>
<script src="assets/js/md5.min.js"></script>
<script src="assets/js/verification.js"></script>
<script src="assets/js/request.js"></script>
<script src="assets/js/jquery.pagination.js"></script>
<script src="assets/js/jquery.serializejson.min.js"></script>
<script src="assets/js/jquery.params.js"></script>
<script src="assets/js/app.js"></script>
<script>
function getInfo (id){
  if (id!=='undefined') {
    $('#two_pwd,#pwd').parents('.am-form-group').hide()
    AjaxRequest({
      url: '/admin/improve_curriculum_info/',
      data: {improve_id: id},
      succFun: function (res) {
        var data = res.data
        $("form").initForm(res.data);
        res.data.teachingt_img && $('#teachingt_img').attr('data-src',res.data.teachingt_img).siblings('img').attr('src',res.data.teachingt_img).siblings('i').hide()
        $('#teachingt_img').parents('.img_content').siblings('.preview_btn').show()
        res.data.cover_photo && $('#cover_photo').attr('data-src',res.data.cover_photo).siblings('img').attr('src',res.data.cover_photo).siblings('i').hide()
        $('#cover_photo').parents('.img_content').siblings('.preview_btn').show()
        $('#teachingt_enclosure').html(res.data.teachingt_enclosure)
      }
    })
  }
}
var id = $.query.get("id").toString() || "undefined";
getInfo(id)
//图片上传
$('[type="file"]').on('change', function (e) {//当chooseImage的值改变时，执行此函数
  var file = this.files[0];
  var isImgUpload= $(this).hasClass('img_upload')
  var _this = this;
  var filePath = $(this).val(), //获取到input的value，里面是文件的路径
    fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
    src = window.URL.createObjectURL(this.files[0]);//转成可以在本地预览的格式
  //判断图片的文件大小
  const fileSizeLt4 = file.size / 1024 / 1024 > 4;
  if (fileSizeLt4) {
    layer.msg('图片大小不能大于4M',{icon:2});
    return false;
  }
  // 检查是否是图片
  if (!fileFormat.match(/.png|.jpg|.jpeg/)&&isImgUpload) {
    layer.msg('上传错误,文件格式必须为：png/jpg/jpeg',{icon:2});
    return false;
  } else {
    var index = layer.load(2, {
      shade: [0.1,'#000'] //0.1透明度的白色背景
    });
    var formData = new FormData();
    formData.append('file', file); // 固定格式
    formData.append('flag', 1); // 固定格式
    $(_this).val('')
    AjaxRequest({
      url:'/admin/file_upload/',
      data: formData,
      contentType: false,
      processData: false,
      succFun: function (res) {
        if(isImgUpload){
          $(_this).attr('data-src',res.data).siblings('img').attr('src',res.data).siblings('i').hide()
          $(_this).parents('.img_content').siblings('.preview_btn').show()
        }else{
          $(_this).parents('button').siblings('small').html(res.data)
        }
        layer.closeAll()
      }
    })
  }
});
// 图片预览
$('.preview_btn').click(function (e) {
  e.preventDefault()
  var imgUrl=$(this).siblings('.img_content').children().attr('data-src')
  console.log(imgUrl)
  layer.open({
    type: 1,
    title: false,
    closeBtn: 0,
    area: ['85%', '500px'],
    skin: 'layui-layer-nobg', //没有背景色
    shadeClose: true,
    content: '<div ><img src="'+imgUrl+'" style="width:100%"></div>'
  });
})
//提交表单
$('#submitBtn').click(function (e) {
  e.preventDefault()
  var $btn = $(this)
  if (Verification()) {
    $btn.button('loading');
    var formData = $('form').serializeJSON()
    formData.teachingt_img=$('#teachingt_img').attr('data-src')
    formData.cover_photo=$('#cover_photo').attr('data-src')
    formData.teachingt_enclosure=$('#teachingt_enclosure').html()
    console.log(formData.class)
    var url='/admin/improve_curriculum_add/'
      if(id!=='undefined'){
        formData.improve_id = id
        url='/admin/improve_curriculum_edit/'
      }
    AjaxRequest({
      url,
      data: formData,
      succFun: function (res) {
        layer.msg(res.message, {icon: 1, time: 1000}, function () {
          window.location.href='course_list.html'
        })
      },
      complete:function () {
        $btn.button('reset');
      }
    })
  }
})
</script>
</body>
</html>